﻿<template>
  <div class="slot-components">
    <!-- 默认插槽 -->
    <slot>
<!--      <i>默认显示这是没有名字插槽1</i>-->
    </slot>

    <!-- 具名插槽: header -->
    <header>
      <slot name="header"></slot>
    </header>

    <!-- 具名插槽: main -->
    <main>
      <slot name="main" style="color: red"></slot>
    </main>

    <!-- 具名作用域插槽: footer -->
    <footer>
      <slot name="footer" :footerInfo="footerData"></slot>
    </footer>

    <!-- 作用域插槽: item -->
    <section>
      <slot name="item" v-for="item in items" :item="item" :key="item.id"></slot>
    </section>

    <!-- 动态插槽名 -->
    <section>
      <h2>Dynamic Slot Section</h2>
      <slot :name="dynamicSlotName"></slot>
    </section>
    <slot>
      <i>默认显示</i>
    </slot>
    <slot>
      <i>nihao8</i>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    dynamicSlotName: {
      type: String,
      default: 'extra'
    }
  },
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' }
      ],
      footerData: {
        copyright: '© 2021',
        company: 'Example Corp'
      }
    };
  }
}
</script>

<style>
.slot-components header, .slot-components main, .slot-components footer, .slot-components section {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
</style>
